import React, { Component,createRef } from 'react'
/*
  非受控组件有两种方式来获取表单中数据
  第1种：利用createRef的方式来获取
*/
export default class App extends Component {
  constructor(props){
    super(props)
    this.nameInput=createRef()
    this.pwdInput=createRef()
  }
  register=()=>{
    console.log('姓名:',this.nameInput.current.value);
    console.log('密码:',this.pwdInput.current.value);
  }
  render() {
    return (
      <div>
        <div>
           <label htmlFor="uname">姓名:</label>
           <input type="text" id='uname' placeholder='请输入姓名' ref={this.nameInput}/>
        </div>
        <div>
           <label htmlFor="pwd">密码:</label>
           <input type="text" id='pwd' placeholder='请输入姓名' ref={this.pwdInput}/>
        </div>
        <div>
          <button onClick={this.register}>注册</button>
        </div>
      </div>
    )
  }
}
